﻿@{
    ViewBag.Title = "MenuList";
}
@section Head{
    <link href="~/Content/css/jquery.treeview.css" rel="stylesheet" />
    <style>
        .filetree span.folder {
            display: inline-block;
        }

        .btnSort {
            margin-left: 15px;
            font-size: 14px;
        }

        #menulist {
            float: left;
            width: 300px;
            border-right: 1px solid #ddd;
        }
    </style>
}
<h2 class="sub-header">菜单列表</h2>

<div style="width:800px">
    <h4>菜单列表</h4>
    <ul id="menulist" class="filetree"></ul>
    <div id="editArea" style="float:left;padding-left:20px;width:450px;">
        <h3 id="editTitle" class="title">文章列表</h3>
        <div>
            <input type="hidden" name="mid" value="0" />
            <input type="text" class="form-control" style="width:200px;display:inline-block;" id="keyword" name="keyword" value="@ViewBag.keyword" />
            <input type="button" class="btn btn-default" onclick="SearchRelationArticle()" value="搜索" />
            <button onclick="AddRelationArticle(this)" class="btn btn-default">添加</button>
        </div>
        <hr />
        <table class="table table-bordered table-condensed">
            <thead>
                <tr>
                    <td>标题</td>
                    <td>添加时间</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody id="tbList"></tbody>
        </table>

    </div>
    <div style="clear:both;"></div>
</div>

@section Scripts{
    <script src="~/Scripts/jquery-ui.js"></script>
    <script src="~/Scripts/jquery.treeview.js"></script>

    <script>
        var menulist = [];
        var currentMenuid = 0;
        $(function () {
            LoadAllMenu();
            var mid = '@Request.QueryString["mid"]';
            if (mid != "") {
                $("#editArea").show();
                loadArticleList(mid, null);
            }
            else {
                $("#editArea").hide();
            }
        })

        function creatMenuHtml(parentid) {
            var menuGroup = getMenuByParentid(parentid);
            var menuitem = "";
            if (menuGroup.length > 0) {
                $.each(menuGroup, function (index, item) {
                    menuitem += "<li>";
                    if (item.MenuType == "parentmenu") {
                        menuitem += "<span class=\"folder\">" + item.MenuName + "</span>";
                        menuitem += "<ul>";
                        menuitem += creatMenuHtml(item.MenuId);
                        menuitem += "</ul>";
                    }
                    else {
                        menuitem += "<a onclick=\"loadArticleList(" + item.MenuId + ",this)\" ><span class=\"file\">" + item.MenuName + "</span></a>";
                    }
                    menuitem += "</li>";
                })
            }
            return menuitem;
        }

        function AddRelationArticle() {
            if (currentMenuid > 0)
                window.location.href = "@Url.Action("AddArticleRelation")?mid=" + currentMenuid;
        }

        function SearchRelationArticle() {
            loadArticleList(currentMenuid, null);
        }

        function loadArticleList(menuid, obj) {
            if (currentMenuid == menuid && obj!=null)
                return false;

            var menu = getMenuByMenuid(menuid);
            currentMenuid = menuid;
            if (menu != undefined && menu.MenuType == "list") {
                $("#editArea").show();               
                $("#editTitle").text(menu.MenuName);
                var searchKeyword = $("#keyword").val().trim();
                $.ajax({
                    type: "POST",
                    url: "@Url.Action("GetArticlesByMenuid")",
                    dataType: "json",
                    data: { mid: menuid, keyword: searchKeyword },
                    success: function (result) {
                        switch (result["state"]) {
                            case "success":            
                                var strHtml = "";
                                $.each(result["list"], function (idx, item) {
                                    strHtml += "<tr><td>" + item["title"] + "</td><td>" + item["createdate"] + "</td><td><button onclick=\"delRelation(" + currentMenuid + "," + item["aid"] + ",this)\" class=\"btn btn-primary\">移除</button></td></tr>";
                                })
                                $("#tbList").html(strHtml);
                                break;
                            case "error":
                                bsAlert(result["msg"]);
                                break;
                            default:
                                break;
                        }
                    }
                });
            }
            else
            {
                $("#editArea").hide();
            }

        }
        function delRelation(mid, aid, obj) {
            $.ajax({
                type: "POST",
                url: "@Url.Action("DelRelationById")",
                dataType: "json",
                data: { mid: mid, aid: aid },
                success: function (result) {
                    switch (result["state"]) {
                        case "success":

                            $(obj).closest("tr").remove();
                            break;
                        case "error":
                            bsAlert(result["msg"]);
                            break;
                        default:
                            break;
                    }
                }
            });
        }
        function getMenuByParentid(pid) {
            var menuGroup = [];
            $.each(menulist, function (index, item) {
                if (item.ParentId == pid) {
                    menuGroup.push(item);
                }
            })
            return menuGroup;
        }
        function getMenuByMenuid(mid) {
            var menu = {};
            $.each(menulist, function (index, item) {
                if (item.MenuId == mid) {
                    menu = item;
                }
            })
            return menu;
        }

        function LoadAllMenu() {
            $.ajax({
                type: "POST",
                url: "@Url.Action("MenuListApi")",
                dataType: "json",
                success: function (result) {
                    menulist = result;
                    var menuRoot = creatMenuHtml(0);
                    $("#menulist").html(menuRoot);
                    $("#menulist").treeview();
                }
            });
        }

        function submitSort() {
            var jsonStr = "";
            $.each($(".sort"), function (index, item) {
                var pid = $(item).attr("data-pid");
                jsonStr += pid + "|" + index + "]";
            })
            $.ajax({
                type: "POST",
                url: "@Url.Action("MenuSort")",
                dataType: "json",
                data: "jsonStr=" + jsonStr,
                success: function (result) {
                    switch (result["state"]) {
                        case "success":
                            bsAlert("排序成功！");
                            $("#mySortModal").modal("hide");
                            LoadAllMenu();
                            break;
                        case "error":
                            bsAlert(result["msg"]);
                            break;
                        default:
                            break;
                    }
                }
            });
        }

    </script>
}
